<template>
  <div>
    <div style="margin-top: 15px;">
      <el-button size="mini" :type="status==-1?'primary':''" round @click="statusQuery(-1)">全部</el-button>
      <el-button size="mini" :type="status==37?'primary':''" round @click="statusQuery(37)">展示中</el-button>
      <el-button size="mini" :type="status==36?'primary':''" round @click="statusQuery(36)">未展示</el-button>
    </div>
    <el-table :data="tableDataList" style="width: 100%;margin-top: 15px;" height="500" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
      <template slot="empty">
        <p>暂无公告</p>
      </template>
      <el-table-column prop="number" align="center" label="序号" min-width="10%">
      </el-table-column>
      <el-table-column prop="title" :show-overflow-tooltip="true" align="center" label="运营名称" min-width="50%">
      </el-table-column>
      <el-table-column prop="pic" :show-overflow-tooltip="true" align="center" label="运营图片" min-width="20%">
        <template slot-scope="scope">
          <img :src="scope.row.pic" width="64" height="64">
        </template>
      </el-table-column>
      <el-table-column prop="status" :show-overflow-tooltip="true" align="center" label="状态" min-width="10%">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="10%">
        <template slot-scope="scope" >
          <el-button type="text" v-if="scope.row.isTop==0" size="mini" @click="pushScreen(scope.row)">推送</el-button>
          <el-button type="text" v-if="scope.row.isTop==0" size="mini" @click="deleteOperating(scope.row)">删除</el-button>
          <el-button type="text" v-if="scope.row.isTop==1" size="mini" @click="cancelPush(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 15px;text-align: right;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="新增运营位"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogClose"
      append-to-body>
      <el-row v-loading="editLoading">
        <el-form label-width="100px" size="mini" :model="dataForm" ref="ruleForm" :rules="rules">
          <el-col :span="24">
            <el-form-item label="运营标题：" prop="title" >
              <el-input v-model="dataForm.title" maxlength="20" placeholder="最多可编辑20个字"  ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运营图：" prop="pic">
              <cy-file-upload
                v-model="dataForm.pic"
                @onSuccess="fileUploadSuccess"
                :before-upload="beforeAvatarUpload"
              ></cy-file-upload>
              <div style="font-size: 12px">只能上传jpg/png文件，且不超过5M. 图片尺寸120*120px</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="跳转链接：" prop="type">
              <el-radio-group v-model="dataForm.type">
                <el-radio :label="0">URL</el-radio>
                <el-radio :label="1">APP_CMS_ID</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="跳转链接：" prop="url">
              <el-input v-model="dataForm.url" ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <div style="text-align: center;">
            <el-button size="mini" @click="cancel">取消</el-button>
            <el-button size="mini" type="primary" @click="add">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  import CyFileUpload from "../../component/CyFileUpload";
  export default {
    name: "liveControllerOperatingManage",
    components: {
      CyFileUpload
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        dialogVisible: false,
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        editLoading:false,
        cellStyle:{
          'font-size':'12px'
        },
        dataForm:{
          title:'',
          pic:'',
          url:'',
          liveId:'',
          type:0
        },
        tableDataList:[],
        pageRequest:{
          pageNum:1,
          pageSize:10
        },
        totalSize:10,
        status:-1,
        parentData:{},
        rules: {
          title: [
            { required: true, message: '请输入运营位标题', trigger: 'blur' }
          ],
          templateType: [
            { required: true, message: '请输入跳转地址', trigger: 'blur' }
          ],
          pic: [
            { required: true, message: '请选择运营图', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择url方式', trigger: 'change' },
          ],
          url: [
            { required: true, message: '请输入url', trigger: 'blur' },
            { validator:this.verify,trigger: 'blur' }
          ]
        }
      }
    },
    mounted: function () {
      this.parentData = this.data
      this.tableJSON();
    },
    methods: {
      verify(rule, value, callback){
        if(this.dataForm.type==0) {
          if (!/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?$/.test(value)) {
            callback(new Error('格式不正确 ( http[s]://www.xxx '));
          }else{
            callback();
          }
        }else{
          callback();
        }
      },
      pushScreenHandle(row){
      },
      tableJSON(){
        let params = {}
        params.liveId = this.parentData.id;
        params.status = this.status<0?'':this.status;
        params.pageNum = this.pageRequest.pageNum;
        params.pageSize = this.pageRequest.pageSize;
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveOperate/list',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.tableDataList = data.data.rows;
            this.totalSize = data.data.total;
          }
        })
      },
      reset(){
        this.dataForm = {}
      },
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
      },
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
      },
      cancel(){ // 取消
        this.$refs.ruleForm.resetFields();
        this.dialogVisible = false
      },
      fileUploadSuccess(res, file) {
        this.dataForm.pic = res.data;
      },
      dialogClose(){
        this.$refs.ruleForm.resetFields();
      },
      pushScreen(row){ // 推屏
        this.updataIsTop(row);
      },
      updataIsTop(row){
        let params = {}
        params.liveId= this.parentData.id
        params.number=row.number
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveOperate/push',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",row)
            this.tableJSON();
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      statusQuery(val){
        this.status = val
        this.tableJSON();
      },
      cancelPush(row){ // 取消推屏
        let params = {
          number: row.number,
          liveId: this.parentData.id
        }
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveOperate/cancelPush',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",row)
            this.tableJSON();
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      deleteOperating(row){ //删除
        this.editLoading=true
        let id = row.id;
        this.$confirm("确定删除吗", "提示", {type:'warning'}).then(() => {
          this.utils.request.liveRequest({
            url: '/api/v1/broadcast/liveOperate/delete',
            method: 'post',
            params: id
          }).then(result => {
            let data = result.data;
            if (data && data.code === '0') {
              this.dialogVisible = false
              this.$message.success("删除成功");
              this.tableJSON()
            } else{
              this.$message.error("删除失败");
            }
            this.editLoading=false;
          })
        })
      },
      add(){ //添加
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.editLoading=true;
            this.dataForm.liveId = this.parentData.id
            this.utils.request.liveRequest({
              url: '/api/v1/broadcast/liveOperate/add',
              method: 'post',
              params: this.dataForm
            }).then(result => {
              let data = result.data;
              if (data && data.code === '0') {
                this.dialogVisible = false
                this.$message.success("添加成功");
                this.tableJSON();
              } else{
                this.$message.error("添加失败");
              }
              this.editLoading=false;
            })
          } else {
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        // 限制图片大小
        const isSize = new Promise((resolve,reject)=> {
          let width = 120;
          let height = 120;
          let _URL = window.URL || window.webkitURL;
          let img = new Image();
          img.src = _URL.createObjectURL(file)
          img.onload = function() {
            let valid = img.width == width && img.height == height
            valid ? resolve() : reject();
          }
        })
          .then(()=>{
            return file;
          },()=>{
            this.$message.error('上传图片像素格式为120*120!');
            return Promise.reject();
          })
        return isSize;
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
